import './Environment.scss'
import { useState, useEffect } from 'react'
import { useRequest, useEventEmitter } from 'ahooks'

import { CommonSmallTitle } from '../Common/SmallTitle'

import { Http } from '../../../../Common/Api'
import { EnvironmentPM25001 } from './EnvironmentPM25'
import { EnvironmentNoise001 } from './EnvironmentNoise'
import { EnvironmentTemperature001 } from './EnvironmentTemperature'
import { EnvironmentStatistics001 } from './EnvironmentStatistics'

export const EnvironmentA01 = () => {
    const TenderEvent = useEventEmitter()
    TenderEvent.useSubscription(val => setTenderStat(val))

    const [TenderList, setTenderList] = useState([])
    const [TenderStat, setTenderStat] = useState()
    const [DataOne, setDataOne] = useState()

    const { runAsync: getConstructionGetEnvironmentOrgList } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            setTenderList(list)
            setTenderStat(list[0].uuid)
        },
    })

    useEffect(() => {
        getConstructionGetEnvironmentOrgList({ url: 'getConstructionGetEnvironmentOrgList' })
    }, [getConstructionGetEnvironmentOrgList])

    const { runAsync: getConstructionEnvironmentData } = useRequest(Http, {
        manual: true,
        onSuccess: res => setDataOne(res),
    })

    useEffect(() => {
        if (TenderStat)
            getConstructionEnvironmentData({
                url: 'getConstructionEnvironmentData',
                data: { organizationUuid: TenderStat },
            })
    }, [getConstructionEnvironmentData, TenderStat])
    return (
        <div className="EnvironmentA01">
            <div className="Top">
                <CommonSmallTitle className="ItemTitle" title="温湿度检测" flex={1} style={{ marginRight: 16 }}>
                    <EnvironmentTemperature001 data={DataOne} />
                </CommonSmallTitle>
                <div className="Nav" style={{ flex: 2, marginRight: 16 }}>
                    <div>
                        {TenderList.map(({ uuid, tableName }) => (
                            <div
                                className={TenderStat === uuid ? 'active' : ''}
                                key={uuid}
                                onClick={() => setTenderStat(uuid)}
                            >
                                {tableName}
                            </div>
                        ))}
                    </div>
                    <CommonSmallTitle className="ItemTitle" title="PM检测" flex={1}>
                        <EnvironmentPM25001 data={DataOne} />
                    </CommonSmallTitle>
                </div>
                <CommonSmallTitle className="ItemTitle" title="噪音检测" flex={1}>
                    <EnvironmentNoise001 data={DataOne} />
                </CommonSmallTitle>
            </div>
            <CommonSmallTitle className="ItemTitle" title="环境趋势分享" flex={338}>
                <EnvironmentStatistics001 TenderStat={TenderStat} />
            </CommonSmallTitle>
        </div>
    )
}
